<template>
  <div class="home">
    <!--    地址 + 搜索框-->
    <div class="header">
      <div class="address">
        <van-icon class-prefix="icon-dingwei iconfont"/>
        <div class="van-ellipsis"> 江西省南昌市465645646564
        </div>
      </div>
    </div>
    <!--轮播图-->
    <div class="slideshow">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="slideItem in slideshowData" :key="slideItem['imgid']">
          <van-image :src="slideItem['imgurl']" fit="fill" :alt="slideItem.title"></van-image>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--    菜单列表-->
    <div class="menu">
      <ul class="menu-list">
        <li v-for="menuItem in menuData" :key="menuItem.id">
          <van-icon :name="menuItem['imgurl']"/>
          <span v-text="menuItem['title']">网速慢</span>
        </li>
      </ul>
    </div>
    <!--    购得消息-->
    <div class="news">
      <div class="news-title">
        <h3>购得消息</h3>
        <span v-text="newsData.newsText">美味实惠，分享领红包，尽在购得商城</span>
      </div>
      <ul class="news-list">
        <li v-for="newsItem in newsData.newsList" :key="newsItem.id">
          <a :href="newsItem['tagetUrl'] === '#' ? 'javascript:;': newsItem['tagetUrl']">
            <van-image :src="newsItem['imgurl']" :alt="newsItem['title']"/>
          </a>
        </li>
      </ul>
    </div>
    <!--    店铺列表-->
    <div class="goods-list">
      <div class="goods-title">
        <h3>推荐商家</h3>
      </div>
      <div class="ShopCard-container">
        <ShopCard></ShopCard>
        <ShopCard></ShopCard>
        <ShopCard></ShopCard>
        <ShopCard></ShopCard>
        <ShopCard></ShopCard>
      </div>
    </div>

    <!--    底部状态栏-->
    <GTabbar active1="0"></GTabbar>
  </div>
</template>

<script>
import {Icon, Swipe, SwipeItem, Image as VanImage} from 'vant';
import ShopCard from "@/components/ShopCard/ShopCard.vue";
import {getData} from "@/request/request";
import GTabbar from "@/components/GTabbar/GTabbar";

export default {
  name: "Home",
  data() {
    return {
      value: '',
      slideshowData: [],
      menuData: [],
      newsData: {
        newsText: '分享实惠，分享领红包，尽在购得商城',
        newsList:[]
      }
    }
  },
  mounted() {
    this.getSlideshowData();
    this.getMenuData();
    this.getNewsData();
  },
  methods: {
    getSlideshowData() {
      getData('get', '/index/brand').then((data) => {
        this.slideshowData = data.data['datalist'];
      })
    },
    getMenuData() {
      getData('get', '/index/advtag').then((data) => {
        // 这里的 sort 将 data 数据很具 sortnum 进行了排序
        this.menuData = data.data['datalist'].sort((a,b)=>{
          return a['sortnum'] - b['sortnum']
        });
      })
    },
    getNewsData(){
        getData('get','/index/advposter').then((data)=>{
          this.newsData['newsText'] = data.data['data']['msg'];
          this.newsData['newsList'] = data.data['datalist'].sort((a,b)=>{
            return a['sortnum'] - b['sortnum']
          });
        })
    }
  },
  components: {
    'van-icon': Icon,
    'van-swipe': Swipe,
    'van-swipe-item': SwipeItem,
    'van-image': VanImage,
    'ShopCard': ShopCard,
    GTabbar
  }
}

</script>

<style lang="scss" scoped>
@import "Home";
</style>
